<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员界面</title>
    <%
        request.setAttribute("APP_PATH", request.getContextPath());
    %>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.80.0">
    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard/">

    <link href="${APP_PATH}/static/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .pagination {
            display: inline-block;
            padding-left: 0;
            margin: 20px 0;
            border-radius: 4px;
        }
        .pagination > li {
            display: inline;
        }
        .pagination > li > a,
        .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        .pagination > li:first-child > a,
        .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        .pagination > li > a:hover,
        .pagination > li > span:hover,
        .pagination > li > a:focus,
        .pagination > li > span:focus {
            z-index: 2;
            color: #23527c;
            background-color: #eee;
            border-color: #ddd;
        }
        .pagination > .active > a,
        .pagination > .active > span,
        .pagination > .active > a:hover,
        .pagination > .active > span:hover,
        .pagination > .active > a:focus,
        .pagination > .active > span:focus {
            z-index: 3;
            color: #fff;
            cursor: default;
            background-color: #337ab7;
            border-color: #337ab7;
        }
        .pagination > .disabled > span,
        .pagination > .disabled > span:hover,
        .pagination > .disabled > span:focus,
        .pagination > .disabled > a,
        .pagination > .disabled > a:hover,
        .pagination > .disabled > a:focus {
            color: #777;
            cursor: not-allowed;
            background-color: #fff;
            border-color: #ddd;
        }
    </style>
    <link href="${APP_PATH}/static/css/dashboard.css" rel="stylesheet">
    <script src="${APP_PATH}/static/js/jquery.js"></script>
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="${APP_PATH}/static/laydate/laydate.js"></script>
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">蚌 埠 学 院</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="user/login">Sign out</a>
        </li>
    </ul>
</header>

<div class="container-fluid">
    <div class="row">
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="position-sticky pt-3">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">
                            <span data-feather="home"></span>
                            员工表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="PMS/../../add.jsp">
                            <span data-feather="file"></span>
                            添加员工
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="PMS/../../update.jsp">
                            <span data-feather="shopping-cart"></span>
                            修改员工信息
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="PMS/../../delete.jsp">
                            <span data-feather="users"></span>
                            删除员工
                        </a>
                    </li>
                </ul>

                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span>外 部 链 接</span>
                    <a class="link-secondary" href="#" aria-label="Add a new report">
                        <span data-feather="plus-circle"></span>
                    </a>
                </h6>
                <ul class="nav flex-column mb-2">
                    <li class="nav-item">
                        <a class="nav-link" href="https://music.163.com/">
                            <span data-feather="file-text"></span>
                            网易云音乐
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://github.com/">
                            <span data-feather="file-text"></span>
                            GitHub
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://gitee.com/">
                            <span data-feather="file-text"></span>
                            Gitee
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.aliyun.com/">
                            <span data-feather="file-text"></span>
                            阿里云
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">员工表</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
                        <span data-feather="calendar"></span>
                        <input name="entry" placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
                    </button>
                </div>
            </div>

<%--            <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>--%>

            <h2>Section title</h2>
            <div class="table-responsive">
                <table id="emps_table" class="table table-striped table-sm">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>NAME</th>
                        <th>GENDER</th>
                        <th>ENTRY</th>
                        <th>SALARY</th>
                        <th>DEPARTMENT</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <%--分页信息--%>
                <div class="row">
                    <%--分页文字信息--%>
                    <div class="col-md-6" id="page_info_area"></div>
                    <%--分页条--%>
                    <div class="col-md-6" id="page_nav_area"></div>
                </div>
            </div>
        </main>
    </div>
</div>


<script src="${APP_PATH}/static/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
<script src="${APP_PATH}/static/js/dashboard.js"></script>

<script>
    $(function () {
        to_page(1)
    })
    //统计总记录数
    let totalRecord
    //当前页
    let currentPage
    function to_page(current) {
        $.ajax({
            url:'${APP_PATH}/user/getAllEmployee',
            data:'current='+current,
            type:'get',
            success:function (data) {
                //1.解析并显示员工信息
                build_emps_table(data)
                //2.解析显示分页信息
                build_page_info(data)
                //3.解析显示分页条
                build_page_nav(data)
            }
        })
    }

    function build_emps_table(data) {
        $('#emps_table tbody').empty()
        let emp = data.extend.employees.list
        $.each(emp,function (index,item) {
            //员工信息构建
            let id = $('<td></td>').append(item.id)
            let name = $('<td></td>').append(item.name)
            let gender = $('<td></td>').append(item.gender)
            let entry = $('<td></td>').append(item.entry.year + '-'  + item.entry.month + '-' + item.entry.dayOfMonth)
            console.log(entry)
            let salary = $('<td></td>').append(item.salary)
            let department = $('<td></td>').append(item.department)

            $("<tr></tr>").append(id).append(name).append(gender).append(entry).append(salary)
                .append(department)
                .appendTo('#emps_table tbody')
        })
    }

    function build_page_info(data) {
        $('#page_info_area').empty()
        $('#page_info_area').append('当前第'+data.extend.employees.pageNum +'页，总'+
            data.extend.employees.pages+'页，总计'+data.extend.employees.total+'记录数')
        totalRecord = data.extend.employees.total
        currentPage = data.extend.employees.pageNum
    }

    function build_page_nav(data) {
        $('#page_nav_area').empty()
        let ul = $('<ul></ul>').addClass('pagination')

        let firstPageLi = $('<li></li>').append($('<a></a>').append('首页').attr('href','#'))
        let prePageLi = $('<li></li>').append($('<a></a>').append('&laquo;'))
        if (!data.extend.employees.hasPreviousPage){
            firstPageLi.addClass('disabled')
            prePageLi.addClass('disabled')
        }else {
            firstPageLi.click(function () {
                to_page(1)
            })
            prePageLi.click(function () {
                to_page(data.extend.employees.pageNum - 1)
            })
        }

        let nextPageLi = $('<li></li>').append($('<a></a>').append('&raquo;'))
        let lastPageLi = $('<li></li>').append($('<a></a>').append('尾页').attr('href','#'))
        if (!data.extend.employees.hasNextPage){
            nextPageLi.addClass('disabled')
            lastPageLi.addClass('disabled')
        }else {
            nextPageLi.click(function () {
                to_page(data.extend.employees.pageNum + 1)
            })
            lastPageLi.click(function () {
                to_page(data.extend.employees.pages)
            })
        }

        ul.append(firstPageLi).append(prePageLi)
        $.each(data.extend.employees.navigatepageNums,function (index,item) {
            let numLi = $('<li></li>').append($('<a></a>').append(item))
            if (data.extend.employees.pageNum == item){
                numLi.addClass('active')
            }
            numLi.click(function () {
                to_page(item)
            })
            ul.append(numLi)
        })
        ul.append(nextPageLi).append(lastPageLi)
        let navEle = $('<nav></nav>').append(ul)
        navEle.appendTo('#page_nav_area')
    }

</script>

<script>
    ;!function(){

//laydate.skin('molv');
        laydate({
            elem: '#demo'
        })
    }();
</script>
</body>
</html>
